<template>
  <div class="olls">
    <div v-for="(x, y) in olls" :key="y">
      <el-card>
        <template #header>
          <div class="card-header">
            {{ y + 1 }}
          </div>
        </template>
        <div class="oll-body" v-if='x.code'>
          <pllcode diameter="120" :code="x.code" @click="edit(x)" />
        </div>
        <template #footer>
          <div class="card-header">
            {{ x.formula }}
          </div>
        </template>
      </el-card>
    </div>

    <el-dialog title="查看数据" v-model="show" width="800px">
      <div style="display: flex;">
        <div style="width: 50%;height: 500px;display: flex;justify-content: center;align-items: center;">
          <pllcode diameter="200" :code="code" @selectPart="selectPart" />
        </div>
        <div class="control">
          <div>
            <div>名称</div>
            <el-input v-model="detail.name" placeholder="请输入名称" style="width: 150px;" />
          </div>
          <div>
            <div>排序</div>
            <el-input v-model="detail.sort" placeholder="请输入排序" style="width: 150px;" />
          </div>
          <div>
            <div>代码</div>
            <el-input v-model="code" placeholder="请输入代码" style="width: 250px;" />
          </div>
          <div>
            <div>公式</div>
            <el-input v-model="formula" placeholder="请输入公式" style="width: 250px;" />
          </div>
          <div>
            <div>输入</div>
            <div class="key-list">
              <template v-if="big">
                <div>
                  <div v-for="(a, b) in formulas[0].split('')" :key="b" @click="inputFormula(a)">
                    {{ a }}
                  </div>
                </div>
                <div>
                  <div v-for="(a, b) in formulas[1].split('')" :key="b" @click="inputFormula(a)">
                    {{ a }}
                  </div>
                </div>
              </template>
              <template v-else>
                <div>
                  <div v-for="(a, b) in formulas[3].split('')" :key="b" @click="inputFormula(a)">
                    {{ a }}
                  </div>
                </div>
                <div>
                  <div v-for="(a, b) in formulas[4].split('')" :key="b" @click="inputFormula(a)">
                    {{ a }}
                  </div>
                </div>
              </template>
              <div>
                <div v-for="(a, b) in formulas[2].split('')" :key="b" @click="inputFormula(a)">
                  <span v-if="a == '↑' && big" class="active">
                    {{ a }}
                  </span>
                  <span v-else>
                    {{ a }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: right;">
        <el-button type="primary" @click="reset">重置</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
        <el-button @click="() => { show = false }">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { queryData, editData } from '@/apis/mysql'
import element  from '@/utils/element';
import pllcode from '../components/pllcode.vue';
const olls = ref([])
const show = ref(false)
const big = ref(false)
const detail = ref(null)
const code = ref('')
const formula = ref('')
const formulas = [
  'UFRLBD',
  'XYZMES',
  '↑2^()C',
  'ufrlbd',
  'xyzmes'
]
onMounted(() => {
  getOll()
})
function getOll() {
  queryData({
    table: 'cubes',
    data: {
      type: 3
    },
    query: {
      show: 60,
      page: 1
    }
  }).then((res) => {
    olls.value = res.data
  })
}

function edit(x) {
  show.value = true
  detail.value = x
  formula.value = x.formula
  code.value = x.code
  // console.log(x.code)

}

function selectPart(y) {
  let arr = code.value.split(',')
  const str = y.toString();
  if (arr.includes(str)) {
    arr = arr.filter(item => item !== str)
  } else {
    arr.push(str)
  }
  code.value = arr.sort((a, b) => a - b).join(',')
}
function save() {
  let data = detail.value
  data.formula = formula.value
  data.code = code.value
  editData({ table: 'cubes', data }).then(res => {
    if (res.code == 1000) {
      element.success(res.msg)
      getOll()
      show.value = false
    }
  })
}
function last() {
  let { id } = detail.value
  const newOBj = olls.value.filter(x => x.id == (id - 1))[0]
  code.value = newOBj.code
  // console.log(detail.value)
}
function reset() {
  code.value = ''
}
function inputFormula(value) {
  if (value == '↑') {
    big.value = !big.value
  } else if (value == 'C') {
    formula.value = formula.value.slice(0, -1)
  } else {
    formula.value += value
  }
}
</script>
<style scoped lang="scss">
.olls {
  display: flex;
  flex-wrap: wrap;

  >div {
    width: 150px;
    border: 1px solid #fff;
    margin: 5px;

    >div {
      text-align: center;
      border-bottom: 1px solid #fff;
    }

    .oll-body {
      display: flex;
      position: relative;
      justify-content: center;
      // padding-top: 20px;

    }

    :deep(.el-card__header) {
      line-height: 24px;
      padding: 10px !important;
      font-weight: 700;
    }

    :deep(.el-card__body) {
      padding: 5px !important;
    }

    :deep(.el-card__footer) {
      height: 58px;
      line-height: 24px;
      overflow-wrap: break-word;
      padding: 5px !important;
    }
  }
}

.control {
  >div {
    display: flex;
    margin-bottom: 10px;

    >div:first-child {
      margin-right: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .color-list {
      display: flex;

      >div {
        width: 20px;
        height: 20px;
        margin: 5px;
        border: 1px solid #ccc;
        cursor: pointer;
      }

      .active {
        border-color: aqua;
      }
    }

    .key-list {
      width: 100%;

      >div {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        >div {
          width: 30px;
          height: 30px;
          margin: 5px;
          border: 1px solid #ccc;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          user-select: none;
          font-weight: 700;

          span {
            font-weight: 700;
          }

          .active {
            width: 100%;
            height: 100%;
            display: block;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ccc;
            color: #fff;
            font-weight: 700;
          }
        }
      }

    }
  }
}
</style>
